<template>
  <!-- 搜索栏 -->
  <el-card class="search-card">
    <el-form :model="searchForm" label-width="80px" inline>
      <el-form-item label="工单编号">
        <el-input v-model="searchForm.productionOrderCode" placeholder="工单编号" clearable/>
      </el-form-item>
      <el-form-item label="工单名称">
        <el-input v-model="searchForm.productionOrderName" placeholder="工单名称" clearable/>
      </el-form-item>
      <el-form-item label="单据来源">
        <el-select style="width: 120px" clearable v-model="searchForm.productionOrderSource" placeholder="单据来源">
          <el-option label="客户订单" :value="1"/>
          <el-option label="库存备货" :value="2"/>
        </el-select>
      </el-form-item>
      <el-form-item label="物料编号">
        <el-input v-model="searchForm.materialCode" placeholder="物料编号" clearable/>
      </el-form-item>
      <el-form-item label="物料名称">
        <el-input v-model="searchForm.materialName" placeholder="物料名称" clearable/>
      </el-form-item>

      <el-form-item label="客户编号">
        <el-input v-model="searchForm.customerCode" placeholder="客户编号" clearable/>
      </el-form-item>
      <el-form-item label="客户名称">
        <el-input v-model="searchForm.customerName" placeholder="客户名称" clearable/>
      </el-form-item>
      <el-form-item label="工单类型">
        <el-select style="width: 120px" clearable v-model="searchForm.productionOrderType" placeholder="单据来源">
          <el-option
              v-for="dictData in productionOrderTypeDictDataList"
              :value="dictData.id"
              :label="dictData.dictLabel"
              :key="dictData.id"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="状态">
        <el-select style="width: 120px;" v-model="searchForm.status" placeholder="请选择状态" clearable>
          <el-option
              v-for="dictData in productionOrderStatusDictDataList"
              :label="dictData.dictLabel"
              :value="dictData.id"
              :key="dictData.id"/>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button x type="primary" @click="handleSearch">搜索</el-button>
        <el-button @click="resetSearch">重置</el-button>
      </el-form-item>
    </el-form>
  </el-card>
  <!-- 工具栏 -->
  <div class="toolbar">
    <el-button type="primary" @click="handleAdd">新增工单</el-button>
	<el-button type="primary" @click="handleUpdata">修改工单</el-button>
	<el-button type="primary" @click="handleDelete">删除工单</el-button>
  </div>
  <!-- 列表 -->
  <el-card class="table-card">
    <el-table
        :data="productionOrderList"
        border
        stripe
        @selection-change="handleSelectionChange"
    >
      <el-table-column prop="productionOrderCode" label="工单编号">
        <template #default="scope">
          <el-link type="primary" @click="">{{ scope.row.productionOrderCode }}</el-link>
        </template>
      </el-table-column>
      <el-table-column prop="productionOrderName" label="工单名称"/>
      <el-table-column prop="typeDictData.dictLabel" label="工单类型"/>
      <el-table-column prop="productionOrderSource" label="工单来源">
        <template #default="scope">
          {{ scope.row.productionOrderSource == 1 ? '客户订单' : '库存备货' }}
        </template>
      </el-table-column>
      <el-table-column prop="orderCode" label="订单编号"/>
      <el-table-column prop="materialCode" label="产品/物料编号"/>
      <el-table-column prop="material.name" label="产品/物料名称"/>
      <el-table-column prop="material.specification" label="规格"/>
      <el-table-column prop="material.unit.name" label="单位"/>
      <el-table-column prop="productionOrderQuantity" label="工单数量"/>
      <el-table-column prop="productionOrderQuantity" label="已生产数量">
        {{ 0 }}
      </el-table-column>
      <el-table-column prop="customer.code" label="客户编号"/>
      <el-table-column prop="customer.name" label="客户名称"/>
      <el-table-column prop="requestDate" label="需求日期"/>
      <el-table-column prop="statusDictData.dictLabel" label="状态">
      </el-table-column>
      <el-table-column label="操作" width="200" fixed="right">
        <template #default="scope">
          <el-button size="small" v-if="scope.row.statusDictData?.dictValue == 1" @click="">编辑</el-button>
          <el-button
              v-if="scope.row.statusDictData?.dictValue == 1" size="small" type="danger" @click="">
            删除
          </el-button>
          <el-button size="small" v-if="scope.row.statusDictData?.dictValue == 2">审核</el-button>
        </template>
      </el-table-column>
    </el-table>
  </el-card>
  <!-- 分页栏 -->
  <div class="pagination-container">
    <el-pagination
        v-model:current-page="pagination.currentPage"
        v-model:page-size="pagination.pageSize"
        :page-sizes="[10, 20, 50, 100]"
        :total="pagination.total"
        layout="total, sizes, prev, pager, next, jumper"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
    />
  </div>
  <!-- 其他弹窗 -->

  <el-dialog
      :title="dialogTitle"
      v-model="addOrUpdateDialogVisable"
      width="80%">
    <el-form v-model="productionOrderForm">
      <el-form-item label="编号">
        <el-input v-model="productionOrderForm.productionOrderCode"/>
        <el-switch
            @click="autoCode"
            v-model="isAutoCode"
            size="large"
            inline-prompt
            active-text="生成"
            inactive-text="生成"/>
      </el-form-item>
      <el-form-item label="工单名称">
        <el-input v-model="productionOrderForm.productionOrderName"/>
      </el-form-item>
      <el-form-item label="来源类型">
        <el-radio-group v-model="productionOrderForm.productionOrderSource">
          <el-radio label="客户订单" value="1"/>
          <el-radio label="库存备货" value="2"/>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="订单编号">
        <el-input v-model="productionOrderForm.orderCode"/>
      </el-form-item>
      <el-form-item label="工单类型" prop="productionOrderType">
        <el-select v-model="productionOrderForm.productionOrderType" placeholder="工单类型">
          <el-option label="自产" value="31"/>
          <el-option label="外协" value="32"/>
          <el-option label="外购" value="33"/>
        </el-select>
      </el-form-item>
      <el-form-item label="产品编号" >
        <el-input v-model="productionOrderForm.materialCode"/>
      </el-form-item>
      <el-form-item label="产品数量">
        <el-input-number v-model="productionOrderForm.productionOrderQuantity" :min="1" />
      </el-form-item>
      <el-form-item label="客户编码">
        <el-input v-model="productionOrderForm.customerCode"/>
      </el-form-item>
      <el-form-item label="需求日期">
        <el-date-picker
          v-model="productionOrderForm.requestDate"
          type="date"
          placeholder="需求日期"
          clearable/>
      </el-form-item>
      <el-form-item label="备注">
        <el-input v-model="productionOrderForm.qrCodeUrl"/>
      </el-form-item>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="cancelAddOrUpdate">取消</el-button>
        <el-button v-if="!isDetail" type="primary" @click="submitProductionOrderForm">确定</el-button>
      </span>
    </template>
  </el-dialog>

</template>

<script setup>
// 导入必须的内容
import {ref, onMounted} from "vue";
import {ElMessage, ElMessageBox} from "element-plus";
import {
  getProductionOrderList,
  getAutoCode,
  queryByCode,
  addProductionOrder,
  deleteProductionOrder,
  updateProductionOrder,
  batchDeleteProductionOrder
} from "@/api/production-order.js";
// 导入字典相关的API
import {getDictDataList} from "@/api/dictData.js";

// ----- 属性声明 ↓
// 绑定搜索表单的数据
const searchForm = ref({
  productionOrderCode: "",
  productionOrderName: "",
  materialCode: "",
  materialName: "",
  status: "",
  productionOrderSource: "",
  customerCode: "",
  customerName: "",
  productionOrderType: "",
})
// 工单列表数据
const productionOrderList = ref([])
// 分页相关数据
const pagination = ref({
  currentPage: 1,
  pageSize: 10,
  total: 0
})
// 弹窗的标题
const dialogTitle = "新增工单";
// 弹窗标记
const addOrUpdateDialogVisable = ref(false);
// 编辑标记
const isEdit = ref(false);
// 新增/编辑表单的数据绑定对象
const productionOrderForm = ref({
  productionOrderCode:'',
  productionOrderName:'',
  productionOrderSource:'',
  productionOrderType:'',
  orderCode:'',
  materialCode:'',
  productionOrderQuantity:'',
  customerCode:'',
  requestDate:'',
  qrCodeUrl:'',
  //....
})
// 是否自动生成编号标记
const isAutoCode = ref(false);
// 是否是显示详情的标记
const isDetail = ref(false);

// 工单类型字典列表
const productionOrderTypeDictDataList = ref([]);
// 工单状态点列表
const productionOrderStatusDictDataList = ref([]);
// ----- 属性声明 ↑
// -- 函数声明 ↓
const loadProductionOrderStatusDictDataList = () => {
  getDictDataList({dictType: "PRODUCTION_ORDER_STATUS"}).then(res => {
    productionOrderStatusDictDataList.value = res.data.records;
  })
}

// 加载工单类型字典的函数
const loadProductOrderDictDataList = () => {
  getDictDataList({dictType: "PRODUCTION_ORDER_TYPE"}).then(res => {
    productionOrderTypeDictDataList.value = res.data.records;
  })
}
// 提交新增/编辑表单的按钮事件
const submitProductionOrderForm = () => {
  addProductionOrder(productionOrderForm.value).then(res=>{
    if (res.code==200){
      ElMessage.success("添加成功");
      addOrUpdateDialogVisable.value=false;
      handleSearch();
      productionOrderForm.value={
        productionOrderCode:'',
        productionOrderName:'',
        productionOrderSource:'',
        productionOrderType:'',
        orderCode:'',
        materialCode:'',
        productionOrderQuantity:'',
        customerCode:'',
        requestDate:'',
        qrCodeUrl:'',
      };
    }else {
      ElMessage.error(res.message);
    }
  })
}
// 取消新增/编辑的事件
const cancelAddOrUpdate = () => {
  addOrUpdateDialogVisable.value = false;
}
// 自动生成编号的事件
const autoCode = () => {

}
//  新增工单的按钮事件
const handleAdd = () => {
  //....
  addOrUpdateDialogVisable.value = true;
}
// 改变了每页大小的事件
const handleSizeChange = (pageSize) => {
  pagination.value.pageSize = pageSize;
  handleSearch();
}
// 改变页面的事件  翻页事件
const handleCurrentChange = (newPage) => {
  pagination.value.currentPage = newPage;
  handleSearch();
}
// 搜索数据的事件
const handleSearch = () => {
  // 调用查询的接口查询数据
  let params = {};// 这里需要组织参数--------------
  // 请求参数就是searchForm.vaue 和  page相关的参数
  params = searchForm.value;// 这里只包含了搜索条件，没有分页参数
  params.pageNum = pagination.value.currentPage;
  params.pageSize = pagination.value.pageSize;
  getProductionOrderList(params).then(res => {
    productionOrderList.value = res.data.list;
    pagination.value.total = res.data.total;
  })
}
const resetSearch = () => {
  searchForm.value = {
    productionOrderCode: '',
    productionOrderType: '',
    productionOrderName: '',
    productionOrderSource: '',
    materialCode: '',
    status: '',
    customerCode: '',
    customerName: ''
  }

  pagination.value.currentPage = 1;

  handleSearch();
}
// -- 函数声明 ↑
onMounted(() => {
  loadProductionOrderStatusDictDataList();
  loadProductOrderDictDataList();
  handleSearch();
})


</script>

<style scoped>
.customer-container {
  padding: 20px;
}

.breadcrumb {
  margin-bottom: 20px;
}

.search-card {
  margin-bottom: 20px;
}

.toolbar {
  margin-bottom: 20px;
}

.table-card {
  margin-bottom: 20px;
}

.pagination-container {
  display: flex;
  justify-content: flex-end;
}

.dialog-footer {
  display: flex;
  justify-content: flex-end;
}
</style>

<style scoped>
.avatar-uploader .avatar {
  width: 178px;
  height: 178px;
  display: block;
}
</style>

<style>
.avatar-uploader .el-upload {
  border: 1px dashed var(--el-border-color);
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: var(--el-transition-duration-fast);
}

.avatar-uploader .el-upload:hover {
  border-color: var(--el-color-primary);
}

.el-icon.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  text-align: center;
}
</style>